<template>
	<view>
		<view class="container u-skeleton">
			<view class="empty-msg" v-if="mesList.length==0" style="text-align: center;padding-top: 140rpx;">
				<!-- <u-image src="/static/images/empty_msg.png"  mode="widthFix"></u-image> -->
				<image src="../../static/images/empty_msg.png" mode="" style="height: 320rpx;width: 60%;"></image>
			</view>
			<view v-else>
				<view class="item" v-for="(item, index) in mesList" :key="index" @click="navTo(item)">
					<view class="left">
						<image class="avatar u-skeleton-circle" :src="item.faceUrl!=''?faceUrlImage(item.faceUrl):'/static/images/tab-home.jpg'" ></image>
						<view class="msg">
							<!-- <view class="badge da-badge">{{ count }}</view> -->
							<view class="badge da-badge" v-show="item.unreadCount <= 99&&item.unreadCount>0">{{ item.unreadCount }}</view>
							<view class="badge da-badge more" v-show="item.unreadCount > 99">99+</view>
							<!-- <u-badge :class="['badge', {less: count < 10}]" type="error" :count="count"></u-badge> -->
						</view>
					</view>
					<view class="right">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<view class="name u-skeleton-fillet" >{{item.showName}}</view>
							<view>{{msToDate(item.lastMessage.timestamp)}}</view>
						</view>
						<view class="message u-skeleton-fillet">{{item.lastMessage.elemType==1?item.lastMessage.elem.text:item.lastMessage.elemType==3?'[图片]':item.lastMessage.elemType==4?'[语音]':item.lastMessage.elemType==2?'[自定义消息]':''}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true, // 是否显示骨架屏组件
				count: "2",
				mesList:[],
			}
		},
		onLoad() {
			setTimeout(() => {
				this.loading = false
			}, 1000)
			this.PDlogin();
		},
		methods: {
			faceUrlImage(url){
				return url.replace(/\\/g,"/");
			},
			add0(m){
				return m<10?'0'+m:m
			},
			msToDate (msec) { 
				var time = new Date(msec*1000);
				var y = time.getFullYear();
				var m = time.getMonth()+1;
				var d = time.getDate();
				var h = time.getHours();
				var mm = time.getMinutes();
				var s = time.getSeconds();
				if (new Date(msec*1000).toDateString() === new Date().toDateString()) {
				    //今天
				    // console.log("当天");
					return this.add0(h)+':'+this.add0(mm);
				} else if (new Date(msec*1000) < new Date()){
				    //之前
				    // console.log("以前的日期");
					let data=new Date();
					let year=data.getFullYear();
					if(year>y){
						return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm);
					}else if(year==y){
						return this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm);
					}
					
				}
				
			},
			navTo(item) {
				console.log(item)
				// return
				// if (data === '/pages/HM-chat/HM-chat') {
					uni.navigateTo({
						url: '/pages/HM-chat/HM-chat?userId='+item.userId+'&msgId='+item.lastMessage.msgId+'&nickName='+item.showName,
						success(res) {
							res.eventChannel.emit('lastMessage', item.lastMessage)
						}
					})
				// }
			},
			async _login() {
				// #ifdef APP-PLUS
				const res = await this.$login()
				console.log(res)
				if (res === 'fail') {
					uni.navigateTo({url:'/pages/login/login'})
				}
				// #endif
				// #ifdef H5
				uni.navigateTo({url:'/pages/login/login'})
				// #endif
			},
			PDlogin(){
				// let user=uni.getStorageSync('user');
				// console.log(11,user)
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({title: '请先登录',icon: 'none'})
					setTimeout(() => {
						this._login()
					}, 500)
				}
			},
			// PDlogin(){
			// 	let user=uni.getStorageSync('user');
			// 	console.log(11,user)
			// 	if(user==null||user==undefined||user==''){
			// 		uni.showToast({
			// 			icon:'none',
			// 			title:'请先登录'
			// 		})
			// 		setTimeout(()=>{
			// 			uni.redirectTo({
			// 				url:'/pages/login/login'
			// 			})
			// 		},1500)
			// 	}
			// }
		},
		mounted() {
			var self = this;
			uni.$on('setConversationListener-message',ret => {
			   console.log('监听会话列表',ret)
			   // self.$set('mesList',ret.conversation);
			   let msgLi=ret.conversationList?ret.conversationList:[];
			   for(var r=0;r<msgLi.length;r++){
				   let type=true;//判断会话是否已经存在会话列表里了
				   for(var i=0;i<self.mesList.length;i++){
						if(msgLi[r].userId==self.mesList[i].userId){
							type=false;
							self.mesList.splice(i,1);
							self.mesList.splice(0,0,msgLi[r]);
						}
				   }
				   if(type){
					   self.mesList.splice(0,0,msgLi[r]);
				   }
				   self.mesList.sort((a,b)=>{return b.lastMessage.timestamp-a.lastMessage.timestamp})
			   }
			});
			//获取会话列表
			this.$IM.Im.getConversationList({
				nextSeq: 0,
				count: 100
			}, ret => {
				console.log('获取会话列表',ret)
				ret.conversationList.sort((a,b)=>{return b.lastMessage.timestamp-a.lastMessage.timestamp})
				self.mesList=ret.conversationList;
			});
			
		},
		onShow() {
			// this.PDlogin();
			let user=uni.getStorageSync('user');
			console.log(11,user)
			if(user==null||user==undefined||user==''){
				this.mesList = []
			}
			this.$IM.setMsgLi();
			var self = this;
			this.$IM.getLoginUser();
			this.$IM.Im.getConversationList({
				nextSeq: 0,
				count: 500
			}, ret => {
				console.log('获取会话列表',ret)
				ret.conversationList.sort((a,b)=>{return b.lastMessage.timestamp-a.lastMessage.timestamp})
				self.mesList=ret.conversationList;
			});
		},
		destroyed() {
			// this.$IM.Im.removeConversationListener()//移除会话监听
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	// 红点消息样式
	.badge {
		background-color: #c92523;
		color: #fff;
		border: 1rpx solid #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30rpx;
		height: 30rpx;
		font-size: 22rpx;
	}
	.da-badge {
		width: 33rpx;
		height: 33rpx;
	}
	.more {
		width: 44rpx;
		height: 33rpx;
		border-radius: 38px;
	}
	.less {
		padding: 4rpx 10rpx !important;
	}
	.container {
		.item {
			padding: 0 30rpx;
			height: 140rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			.left {
				width: 15%;
				position: relative;
				.avatar {
					width: 87rpx;
					height: 87rpx;
					border-radius: 50%;
				}
				.msg {
					position: absolute;
					right: -10rpx;
					top: 0rpx;
				}
			}
			.right {
				width: 83%;
				margin-left: 30rpx;
				border-bottom: 1rpx solid #f6f7f9;
				.name {
					font-size: 30rpx;
					color: #2c313c;
					padding-top: 10rpx;
					width: 50%;
				}
				.message {
					font-size: 26rpx;
					color: #7f7f7f;
					padding: 6rpx 0 28rpx 0;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}
		.item:first-child {
			padding-top: 12rpx;
		}
		.item:last-child {
			.right {
				border-bottom: none;
			}
		}
	}
</style>
